<template>
  <!-- 页面主容器 -->
  <view class="my-page-container">
    <!-- 头部用户信息区域 -->
    <view class="header">
      <!-- 用户头像 -->
      <view class="avatar-container">
        <image class="avatar" :src="userData.avatar || '/static/imgs/assets/header.png'"></image>
        <text class="userid">ID: {{ userData._id || '--' }}</text>
      </view>
      <!-- 用户信息展示 -->
      <view class="user-info">
        <text class="username">{{ userData.username || '未登录用户' }}</text>
      </view>
    </view>

    <!-- 功能选项区域 -->
    <view class="function-options">
      <!-- 我的地址选项 -->
      <view class="option" @click="goToAddress">
        <image class="icon" src="/static/imgs/assets/address.png"></image>
        <text class="option-text">我的地址</text>
        <uni-icons type="right" size="18" color="#999"></uni-icons>
      </view>
      <!-- 我的关注选项 -->
      <view class="option" @click="goToFollow">
        <image class="icon" src="/static/imgs/assets/follow.png"></image>
        <text class="option-text">我的关注</text>
        <uni-icons type="right" size="18" color="#999"></uni-icons>
      </view>
      <!-- 我的订单选项 -->
      <view class="option" @click="goToOrders">
        <image class="icon" src="/static/imgs/assets/order.png"></image>
        <text class="option-text">我的订单</text>
        <uni-icons type="right" size="18" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-button" @click="logout" v-if="isLoggedIn">
      <text class="logout-text">退出登录</text>
    </view>
    <!-- 登录按钮 -->
    <view class="login-button" @click="goToLogin" v-else>
      <text class="login-text">立即登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false, // 登录状态标识
      userData: {        // 用户数据对象（无需初始化默认值）
        _id: '',
        username: '',
        avatar: ''
      },
      isLoading: false   // 数据加载状态
    }
  },

  // 使用onShow确保每次进入页面都刷新数据
  onShow() {
    this.initUserData();
  },

  methods: {
    // 初始化用户数据
    async initUserData() {
      this.isLoading = true;
      
      try {
        // 1. 检查本地登录状态
        await this.checkLoginStatus();
        
        // 2. 如果已登录则获取远程数据
        if (this.isLoggedIn) {
          await this.fetchUserDataFromDB();
        }
      } catch (error) {
        console.error('初始化用户数据失败:', error);
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },

    // 检查本地登录状态
    checkLoginStatus() {
      return new Promise((resolve) => {
        try {
          const userInfo = uni.getStorageSync('userInfo');
          this.isLoggedIn = !!userInfo;
          resolve();
        } catch (e) {
          console.error('读取本地存储失败:', e);
          this.isLoggedIn = false;
          resolve();
        }
      });
    },

    // 从数据库获取用户数据
    async fetchUserDataFromDB() {
      return new Promise((resolve) => {
        const userInfo = uni.getStorageSync('userInfo');
        if (!userInfo) {
          this.isLoggedIn = false;
          return resolve();
        }

        try {
          const parsedUserInfo = JSON.parse(userInfo);
          const userId = parsedUserInfo._id;
          if (!userId) {
            console.error('本地存储的用户信息中 ID 为空，可能是登录数据保存有误，请重新登录。');
            uni.showModal({
              title: '登录信息异常',
              content: '本地存储的用户信息中 ID 为空，请重新登录。',
              confirmText: '去登录',
              success: (res) => {
                if (res.confirm) {
                  this.goToLogin();
                }
              }
            });
            this.isLoggedIn = false;
            return resolve();
          }

          uni.request({
            url: `http://localhost:3000/users/${userId}`,
            method: 'GET',
            success: (res) => {
              if (res.statusCode === 200 && res.data) {
                this.userData = {
                  _id: res.data.id || '--',
                  username: res.data.username || '未命名用户',
                  avatar: res.data.avatar || '/static/imgs/assets/header.png'
                };
              } else {
                throw new Error(res.data?.message || '数据格式错误');
              }
              resolve();
            },
            fail: (err) => {
              throw new Error(err.errMsg || '网络请求失败');
            }
          });
        } catch (error) {
          console.error('获取用户数据异常:', error);
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
          resolve();
        }
      });
    },

    // 跳转到地址管理
    goToAddress() {
      if (!this.checkAuth()) return;
      uni.navigateTo({ url: '/pages/me/address-list' });
    },

    // 跳转到关注列表
    goToFollow() {
      if (!this.checkAuth()) return;
      uni.navigateTo({ url: '/pages/me/follow' });
    },

    // 跳转到订单列表
    goToOrders() {
      if (!this.checkAuth()) return;
      uni.navigateTo({ url: '/pages/order/order-list' });
    },

    // 检查登录状态（用于路由跳转前的鉴权）
    checkAuth() {
      if (!this.isLoggedIn) {
        uni.showModal({
          title: '未登录',
          content: '请先登录后再进行操作',
          confirmText: '去登录',
          success: (res) => {
            if (res.confirm) {
              this.goToLogin();
            }
          }
        });
        return false;
      }
      return true;
    },

    // 跳转到登录页
    goToLogin() {
      uni.navigateTo({ url: '/pages/login/login' });
    },

    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储
            uni.removeStorageSync('userInfo');
            uni.removeStorageSync('token');
            
            // 重置数据
            this.isLoggedIn = false;
            this.userData = {
              _id: '',
              username: '',
              avatar: ''
            };
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });
          }
        }
      });
    }
  }
}
</script>
<style lang="scss">
.my-page-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid #f0f0f0;
  margin-bottom: 16rpx;
}

.userid {
  font-size: 24rpx;
  color: #999;
  background-color: #f8f8f8;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.function-options {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.option {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
  
  &:last-child {
    border-bottom: none;
  }
}

.icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 20rpx;
}

.option-text {
  font-size: 30rpx;
  color: #333;
  flex: 1;
}

.logout-button, .login-button {
  background-color: #007AFF;
  color: #fff;
  text-align: center;
  padding: 28rpx;
  border-radius: 16rpx;
  margin-top: 40rpx;
}

.logout-text, .login-text {
  font-size: 32rpx;
  font-weight: 500;
}

.login-button {
  background-color: #07C160;
}
</style>